<!-- 照片鼠标悬浮放大 -->
<template>
  <div @click.stop class="photo-Scale">
    <el-popover popper-class="photo-scale-popover" v-if="src" placement="right" :width="parseInt(props.width)" trigger="click" content="">
      <img :src="src" style="width: 100%" />
      <template #reference>
        <img v-if="src" class="photo" :src="src" />
        <span v-else></span>
      </template>
    </el-popover>
  </div>
</template>

<script setup name="PhotoScale">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { stores } from '@/stores/index.js'
const userStore = stores.useUserStore()
const props = defineProps({
  width: {
    type: [Number, String],
    default: 600
  },
  src: {
    type: String,
    default: ''
  }
})
const src = computed(() => {
  if (props.src) {
    return props.src.includes('&token') ? props.src : props.src + '?token=' + userStore.token
  } else {
    return ''
  }
})
</script>
<style lang="scss" scoped>
.photo {
  margin-top: 6px;
  width: 25px;
  max-height: 45px;
  cursor: pointer;
}
</style>
